<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width,initial-scale=1"/>
  <meta name="theme-color" content="#000000"/>
  <meta name="description" content="Web site created using create-react-app"/>
  <link rel="shortcut icon" href="baojian.svg"/>
  <title>斩风天下第一</title>
  <link rel="stylesheet" href="css/layui.css">
  <script src="layui.js"></script>
</head>

<body class="layui-layout-body">
<div class="layui-container">
  <div class="layui-row layui-col-space20">
    <div class="layui-col-md7">
      <fieldset class="layui-elem-field layui-field-title site-title">
        <legend>
          <a name="nav-theme">斩风木桩计算器</a>
          <span class="layui-breadcrumb" lay-separator=" " style="visibility: visible;">
            <a href="">&nbsp;&nbsp;Formula by 阿朴</a><span lay-separator=""> </span>
          </span>
        </legend>
      </fieldset>
      <div class="layui-row layui-col-space20">
        <div class="layui-col-md10">
          <form class="layui-form" action="/">
            <div class="layui-form-item">
              <label class="layui-form-label">流派</label>
              <div class="layui-input-block">
                <select name="liupai" lay-verify="required">
                  <option value="0">纯影</option>
                  <option value="1">云豪</option>
                  <option value="2">纯豪</option>
                </select>
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color:red">*</span>&nbsp;基础攻击</label>
              <div class="layui-input-block">
                <input type="number" min="1" name="gongjili" lay-verify="required" placeholder="不是最终攻击" lay-reqtext="请填写基础攻击"
                       autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">灵器攻击</label>
              <div class="layui-input-block">
                <input type="number" min="0" name="gongjili1" placeholder="灵器额外攻击 如83 没有可不填" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color:red">*</span>&nbsp;强度</label>
              <div class="layui-input-block">
                <input type="number" min="1" name="qiangdu" lay-verify="required" lay-reqtext="请填写强度" autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">额外强度</label>
              <div class="layui-input-block">
                <input type="checkbox" name="qiangdu1" title="血露薇强度">
                <input type="checkbox" name="qiangdu2" title="吉吉王国强度">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label">灵器插槽</label>
              <div class="layui-input-block">
                <input type="checkbox" name="sdse" title="&thinsp;&thinsp;&thinsp;&thinsp;势断山阿&emsp;">
                <input type="checkbox" name="sdsej" title="&nbsp;势断山阿·极&nbsp;&thinsp;&thinsp;&thinsp;">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color:red">*</span>&nbsp;专精</label>
              <div class="layui-input-block">
                <input type="number" min="1" name="zhuanjing" lay-verify="required" lay-reqtext="请填写专精" autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color:red">*</span>&nbsp;专注</label>
              <div class="layui-input-block">
                <input type="text"
                       onkeyup="clearNoNum(this); value = value"
                       name="zhuanzhu" lay-verify="required" value="" placeholder="最高100 根据木桩目标取实际专注" lay-reqtext="请填写专注" autocomplete="off"
                       class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color:red">*</span>&nbsp;会心</label>
              <div class="layui-input-block">
                <input type="text"
                       onkeyup="clearNoNum(this); value = value"
                       name="huixin" lay-verify="required" value="" lay-reqtext="请填写会心" autocomplete="off" class="layui-input">
              </div>
            </div>
            <div class="layui-form-item">
              <label class="layui-form-label"><span style="color:red">*</span>&nbsp;急速</label>
              <div class="layui-input-block">
                <input type="text"
                       onkeyup="clearNoNum(this); value = value"
                       name="jisu" lay-verify="required" lay-reqtext="请填写急速" autocomplete="off" class="layui-input"><!-- disabled=""-->
              </div>
            </div>
            <div class="layui-form-item">
              <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formDemo" style="background-color: #5FB878;">计算</button>
              </div>
            </div>
          </form>
        </div>
        <div class="layui-col-md12">
          <hr class="layui-bg-green">
        </div>
        <div class="layui-col-md6">
          <span style="color:#c2c2c2">斩风交流群:&nbsp;</span>
          <a href="https://jq.qq.com/?_wv=1027&k=VCXlae1f">
            <i class="layui-icon layui-icon-login-qq"></i>
            <span style="color:#c2c2c2">&nbsp;Sorry66&nbsp;&nbsp;</span>
          </a>
          <a href="https://jq.qq.com/?_wv=1027&k=0ziJhqda">
            <i class="layui-icon layui-icon-login-qq"></i>
            <span style="color:#c2c2c2">&nbsp;猪猪古剑交流</span>
          </a>
          <br/>
          <span style="color:#c2c2c2">计算器问题反馈:&nbsp;</span>
          <a href="https://qm.qq.com/cgi-bin/qm/qr?k=rCJ9xPB3Hca5kiUIQgA7hdmRJTCL08X8&noverify=0">
            <i class="layui-icon layui-icon-login-qq"></i>
            <span style="color:#c2c2c2">&nbsp;阿朴&nbsp;&nbsp;</span>
          </a>
          <i class="layui-icon layui-icon-username"></i>
          <span style="color:#c2c2c2">&nbsp;流月城-脆萄</span>
        </div>
      </div>
    </div>
    <div class="layui-col-md3 layui-cols-md-offset9" id="showResponseArea" style="display: none;">
      <br>
      <br>
      <ul class="layui-timeline">
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis"></i>
          <div class="layui-timeline-content layui-text">
            <h3 class="layui-timeline-title">五分钟整目标DPS:&nbsp;<span id="dps"></span></h3>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis"></i>
          <div class="layui-timeline-content layui-text">
            <h4 class="layui-timeline-title">影子</h4>
            <div style="font-size:12px">
              <span>影子伤害:&nbsp;</span>
              <span id="shYz"></span><br>
              <span>影子伤害占比:&nbsp;</span>
              <span id="zbYz"></span><br>
              <span>影子伤害-会心:&nbsp;</span>
              <span id="shYzA"></span><br>
              <span>影子伤害-未会心:&nbsp;</span>
              <span id="shYzB"></span><br>
            </div>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis"></i>
          <div class="layui-timeline-content layui-text">
            <h4 class="layui-timeline-title">卷云斩</h4>
            <div style="font-size:12px">
              <span>卷云伤害:&nbsp;</span>
              <span id="shJy"></span><br>
              <span>卷云伤害占比:&nbsp;</span>
              <span id="zbJy"></span><br>
              <span>卷云伤害-会心:&nbsp;</span>
              <span id="shJyA"></span><br>
              <span>卷云伤害-未会心:&nbsp;</span>
              <span id="shJyB"></span><br>
            </div>
          </div>
        </li>
        <div id="showResponseArea_1" style="display: none;">
          <li class="layui-timeline-item">
            <i class="layui-icon layui-timeline-axis"></i>
            <div class="layui-timeline-content layui-text">
              <h4 class="layui-timeline-title">疾风幻影</h4>
              <div style="font-size:12px">
                <span>疾风幻影伤害:&nbsp;</span>
                <span id="shZhuan"></span><br>
                <span>疾风幻影伤害占比:&nbsp;</span>
                <span id="zbZhuan"></span><br>
              </div>
            </div>
          </li>
        </div>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis"></i>
          <div class="layui-timeline-content layui-text">
            <h4 class="layui-timeline-title">惊风刃-狂</h4>
            <div style="font-size:12px">
              <span>惊风刃-狂伤害:&nbsp;</span>
              <span id="shJfPro"></span><br>
            </div>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis"></i>
          <div class="layui-timeline-content layui-text">
            <h4 class="layui-timeline-title">踏日</h4>
            <div style="font-size:12px">
              <span>踏日伤害:&nbsp;</span>
              <span id="shTa"></span><br>
            </div>
          </div>
        </li>
        <li class="layui-timeline-item">
          <i class="layui-icon layui-timeline-axis"></i>
          <div class="layui-timeline-content layui-text">
            <h4 class="layui-timeline-title">贪狼斩</h4>
            <div style="font-size:12px">
              <span>贪狼斩伤害:&nbsp;</span>
              <span id="shTlz"></span><br>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<script>
  function clearNoNum(obj) {
    //修复第一个字符是小数点 的情况.
    if (obj.value !== '' && obj.value.substr(0, 1) === '.') {
      obj.value = "";
    }
    obj.value = obj.value.replace(/^0*(0\.|[1-9])/, '$1');//解决 粘贴不生效
    obj.value = obj.value.replace(/[^\d.]/g, "");  //清除“数字”和“.”以外的字符
    obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
    obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
    obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两个小数
    obj.value = obj.value.replace(/^[1-9]\d{2,}[\.]?\d*/g, '100') // 最大为100
    if (obj.value.indexOf(".") < 0 && obj.value !== "") {//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额
      if (obj.value.substr(0, 1) === '0' && obj.value.length === 2) {
        obj.value = obj.value.substr(1, obj.value.length);
      }
    }
    if (obj.value.substring(obj.value.length - 1, obj.value.length) !== '%') {
      obj.value = obj.value + '%';
    }
  }
</script>
<script>
  layui.use('form', function () {
    var form = layui.form;
    var $ = layui.jquery;
    form.on('submit(formDemo)', function (data) {
      var dataDto = JSON.stringify(data.field);
      //layer.msg(dataDto);
      dataDto = dataDto.replace(/[%]/g, "")
      console.log(dataDto)
      if (data.field.liupai === "0") {
        document.getElementById('showResponseArea_1').style.display = '';
      } else {
        document.getElementById('showResponseArea_1').style.display = 'none';
      }
      $.ajax({
        contentType: "application/json;charset=UTF-8",
        url: "/compute",
        type: "post",
        data: dataDto,
        dataType: "json",
        success: function (datas) {
          //console.log(datas.dps);
          document.getElementById('showResponseArea').style.display = '';
          $("#dps").html(datas.dps);
          $("#shYz").html(datas.shYz);
          $("#zbYz").html(datas.zbYz);
          $("#shYzA").html(datas.shYzA);
          $("#shYzB").html(datas.shYzB);
          $("#shJy").html(datas.shJy);
          $("#zbJy").html(datas.zbJy);
          $("#shJyA").html(datas.shJyA);
          $("#shJyB").html(datas.shJyB);
          $("#shZhuan").html(datas.shZhuan);
          $("#zbZhuan").html(datas.zbZhuan);
          $("#shJfPro").html(datas.shJfPro);
          $("#shTa").html(datas.shTa);
          $("#shTlz").html(datas.shTlz);
        }
      });
      return false;
    });
  });
</script>
<script>
  layui.use('element', function () {
  });
</script>
</body>
</html>